<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./css/amazeui.min.css" />
  <link rel="stylesheet" href="./css/main.css" />
</head>
<body>
  <div class="box">
    <div class="wechat">
      
      <div class="sidestrip">
        <div class="am-dropdown" data-am-dropdown>
          <!--头像插件-->
          <div class="own_head am-dropdown-toggle"></div>
          <div class="am-dropdown-content">
              <div class="own_head_top">
                <div class="own_head_top_text">
                  <p class="own_name">彭于晏丶plus<img src="images/icon/head.png" alt="" /></p>
                  <p class="own_numb">微信号：jsk8787682</p>
                </div>
                <img src="images/own_head.jpg" alt="" />
              </div>
              <div class="own_head_bottom">
                <p><span>地区</span>江西 九江</p>
                <div class="own_head_bottom_img">
                  <a href=""><img src="images/icon/head_1.png"/></a>
                  <a href=""><img src="images/icon/head_2.png"/></a>
                </div>
              </div>
            </div>
        </div>
        <!--三图标-->
          <div class="sidestrip_icon">
            <a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
            <a id="si_2"></a>
            <a id="si_3"></a>
          </div>
          
          <!--底部扩展键-->
          <div id="doc-dropdown-justify-js">
            <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
              <div class="sidestrip_bc am-dropdown-toggle"></div>
                <ul class="am-dropdown-content" style ="">
                <li>
                  <a href="#" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
                  <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                  <div class="am-modal-dialog">
                    <div class="am-modal-hd">Modal 标题
                      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                      Modal 内容。本 Modal 无法通过遮罩层关闭。
                    </div>
                  </div>
                </div>
                </li>
                
                <li><a href="#">备份与恢复</a></li>
                <li><a href="#">设置</a></li>
              </ul>
            </div>	
        </div>	
      </div>
      
      <!--聊天列表-->
      <div class="middle on">
        <div class="wx_search">
          <input type="text" placeholder="搜索"/>
          <button>+</button>
        </div>
        <div class="office_text">
          <ul class="user_list">

          </ul>
        </div>	
      </div>
        
        <!--好友列表-->
      <div class="middle">
        <div class="wx_search">
          <input type="text" placeholder="搜索"/>
          <button>+</button>
        </div>
        <div class="office_text">
          <ul class="friends_list">
            <li>
              <p>新的朋友</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/1.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">新的朋友</p>
                </div>
              </div>
            </li>
            <li>
              <p>公众号</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/2.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">公众号</p>
                </div>
              </div>
            </li>
            <li>
              <p>A</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/3.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">彭于晏丶plus</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/4.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">陈依依</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/5.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">毛毛</p>
                </div>
              </div>
            </li>
            <li>
              <p>B</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/6.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">苏笑言</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/7.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">往事不再提</p>
                </div>
              </div>
            </li>
            <li>
              <p>C</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/8.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">夏继涛</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/9.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">早安无恙</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/10.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">王鹏</p>
                </div>
              </div>
            </li>
            <li>
              <p>D</p>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/11.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">涨了潮了</p>
                </div>
              </div>
              <div class="friends_box">
                <div class="user_head"><img src="images/head/12.jpg"/></div>
                <div class="friends_text">
                  <p class="user_name">Ktz丶中融资</p>
                </div>
              </div>
            </li>
          </ul>
        </div>	
      </div>
      
      <!--程序列表-->
      <div class="middle">
        <div class="wx_search">
          <input type="text" placeholder="搜索收藏内容"/>
          <button>+</button>
        </div>
        <div class="office_text">
          <ul class="icon_list">
            <li class="icon_active">
              <div class="icon"><img src="images/icon/icon.png" alt="" /></div>
              <span>全部收藏</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
              <span>链接</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
              <span>相册</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
              <span>笔记</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
              <span>文件</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
              <span>音乐</span>
            </li>
            <li>
              <div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
              <span>标签</span>
            </li>
          </ul>
        </div>	
      </div>
    
      <!--聊天窗口-->
      <div class="talk_window">
        <div class="windows_top">
          <div class="windows_top_box">
            <span>早安无恙</span>
            <ul class="window_icon">
              <li><a href=""><img src="images/icon/icon7.png"/></a></li>
              <li><a href=""><img src="images/icon/icon8.png"/></a></li>
              <li><a href=""><img src="images/icon/icon9.png"/></a></li>
              <li><a href=""><img src="images/icon/icon10.png"/></a></li>
            </ul>
            <div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
          </div>
        </div>
        
        <!--聊天内容-->
        <div class="windows_body">
          <div class="office_text" style="height: 100%;">
            <ul class="content" id="chatbox">
              <li class="me"><img src="images/own_head.jpg" title="金少凯"><span>疾风知劲草，板荡识诚臣</span></li>
              <li class="other"><img src="images/head/15.jpg" title="张文超"><span>勇夫安知义，智者必怀仁</span></li>
            </ul>
          </div>
        </div>
        
        <div class="windows_input" id="talkbox">
          <div class="input_icon">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
          </div>
          <div class="input_box">
            <!-- <textarea name="" rows="" cols="" id="input_box"></textarea> -->
            <div name="" rows="" cols="" id="input_box" contenteditable="true"></div>
            <button id="send">发送（S）</button>
          </div>
        </div>
      </div>
    </div>
  </div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/zUI.js"></script>
<script type="text/javascript" src="js/wechat.js"></script>
</body>

</html>